<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../Mint UI/style.css">
</head>
<body>
    
    <div id="app">
        <div @click="showPopup">show pupup</div>
        <mt-popup
        v-model="popupVisible"
        position="bottom"
        >
            <mt-picker :slots="slots" @change="onValuesChange" style="border: 1px solid red;width: 200vw;"></mt-picker>
        </mt-popup>


    </div>
    <script src="../vue/js/vue.js"></script>
    <script src="../Mint UI/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data(){
                return {
                    popupVisible:false,
                    slots: [
                        {
                        flex: 1,
                        values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                        className: 'slot1',
                        textAlign: 'right'
                        },
                         {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                        }, 
                        {
                        flex: 1,
                        values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                        className: 'slot3',
                        textAlign: 'left'
                        }
                    ]
                }
            },
            methods: {
                showPopup () {
                    this.popupVisible = true
                },
                hidePopup () {
                    this.popupVisible = false
                },
                onValuesChange(picker, values) {
                    if (values[0] > values[1]) {
                        picker.setSlotValue(1, values[0]);
                    }
                    
                    console.log(picker,values)
                }
            }
        })
    </script>
</body>
</html>